<template>
  <section>
    <el-card class="search-card">
      <BasicTableForm ref="formData"
        isScalingBtn
        :colNumOfRow="4"
        :formColumns="formItemList"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm" />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :showSelectCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :tableHeight="460"
        :actionColWidth="80"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <el-row slot="content_context" type="flex" justify="start">
          <BtnRender :render="renderBtnsBar" />
        </el-row>
      </basic-table>
    </el-card>
  </section>
</template>

<script>
import { mapGetters } from 'vuex';
import { getBtnsId } from '@/libs/btnsPermission';
import BasicTableForm from '@/components/supplier/BasicForm'; // 表单组件
import BasicTable from '@/components/supplier/BasicTable';
import {
  queryTempPriceBillListService,
  exportTempPriceBillListService
} from '@/api/supplier/supervision/tempPrice';
import { createExcelByExport } from '@/utils/bizUtils';
import { getHasIndexTableData } from '@/pages/supplier/utils/bizUtils';
import { INITIAL_FIELDS_VALUE, FORM_ITEM_LIST, TABLE_COLUMNS } from './constants';
import { getBtnsBar } from '@supplier/utils/btnsUtils';
import BtnRender from '@/components/JSXRender/BtnRender';

export default {
  components: {
    BasicTableForm,
    BasicTable,
    BtnRender
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  data () {
    return {
      formItemList: FORM_ITEM_LIST,
      tableInfo: {
        list: [],
        selection: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      pagination: {
        current: 1,
        total: 0,
        size: 10
      },
      formData: Object.assign({}, INITIAL_FIELDS_VALUE),
      exporting: false
    };
  },
  created () {
    sessionStorage.setItem('buttonId', getBtnsId('查询'));
    this.getTableData();
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        {
          label: '新增',
          method: this.handleCreatePriceSupervision,
          size: 'mini',
          type: 'primary',
          hasAuth: true
        }
      ];
      if (this.supplierExportConfig.supervision) {
        btnsBar.unshift({
          label: '导出',
          method: this.handleExportFile,
          loading: this.exportLoading,
          size: 'mini',
          type: 'primary',
          hasAuth: true
        })
      }
      return getBtnsBar(h, btnsBar, this.showBtn);
    },
    handleExportFile () {
      this.exporting = true
      exportTempPriceBillListService(this.getRequestParams()).then((res) => {
        createExcelByExport({ excelTitle: '临采价格核查信息', res })
        this.exporting = false
      }).catch((reason) => {
        console.log('reason', reason)
        this.exporting = false
      })
    },
    handleCreatePriceSupervision () {
      this.$router.push({ name: 'addTempPriceSupervision' });
    },
    handleQueryForm () {
      this.getTableData(1);
    },
    // 页码切换
    handlePageChange (val) {
      this.getTableData(val);
    },
    // 每页条数切换
    handlePageSizeChange (val) {
      this.getTableData(1, val);
    },
    // 获取列表查询参数
    getRequestParams () {
      const {
        companyName,
        supplierCode,
        supplierName,
        productCode,
        productName,
        unit,
        specification,
        priceRatio,
        balance,
        otherSupplierBalance,
        purchasePerson,
        createUserId,
        managementAreaId,
        time: [startTime, endTime]
      } = this.formData
      return {
        companyName,
        supplierCode,
        supplierName,
        productCode,
        productName,
        unit,
        specification,
        priceRatio,
        balance,
        otherSupplierBalance,
        purchasePerson,
        createUserId,
        startTime,
        endTime,
        managementAreaId,
      }
    },
    async getTableData (current = this.pagination.current, size = this.pagination.size) {
      this.tableInfo.loading = true
      const params = Object.assign({ current, size }, this.getRequestParams())
      const resp = await queryTempPriceBillListService(params)
      this.tableInfo.loading = false
      if (resp && resp.result) {
        const { records, total, pages } = resp.result
        this.pagination = Object.assign(this.pagination, { current, size, total, pages })
        this.tableInfo.list = getHasIndexTableData(records, this.pagination)
      } else {
        this.tableInfo.list = []
      }
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      return <div>
        <el-button type="text" disabled={!this.showBtn('查看')} nativeOnClick={() => { this.handleView(row) }}>查看</el-button>
      </div>
    },
    // 查看
    handleView (data) {
      this.$router.push({ name: 'viewTempPriceSupervision', query: { id: data.parentId } });
    },
  }
}
</script>
